<template>
	<view class="content">
    <view class="search-wrapper">
      <u-search v-model="listQuery.param" bg-color="#fff" height="70" placeholder="请输入手机号/姓名/客户来源" @custom="search"
                @search="search"></u-search>
    </view>
    <view class="list">
      <u-empty v-if="!staffList.length" mode="list" style="margin-top: 200rpx;"></u-empty>
      <view class="formBox item" v-for="(item,index) in staffList" :key="index">
        <view class="title f-c-sb">
          <view class="f-c-fs">
            <view>姓名：{{ item.customerName }}</view>
            <view :class="item.operatorType==1?'type':'type1'">{{ item.operatorTypeStr }}</view>
          </view>
          <u-checkbox :size="50" @change="checkboxChange(index, item.checkbox, item.customerNo)"
                      v-model="item.checkbox"></u-checkbox>
        </view>
				<view class="f-c-fs">
					<view class="label">电话:</view>
					<view class="value">{{item.phone}}</view>
				</view>
				<view class="f-c-fs">
					<view class="label">客户来源:</view>
					<view class="value">{{item.registrationWay}}</view>
				</view>
				<view class="f-c-fs">
					<view class="label">创建时间:</view>
					<view class="value">{{item.timeCreate}}</view>
				</view>
			</view>
			<u-loadmore v-if="!listQuery.noData && staffList.length != 0" :status="'nomore'" :load-text="{ nomore: '没有更多数据了' }" style="" />
		</view>
		<view class="btn-wrapper f-c-sa">
			<view class="text" @click="show = true">
				已选：{{ selectList.length }}位客户
				<u-icon name="arrow-up" color="#333" size="32"></u-icon>
			</view>
			<view class="btn" @click="affirm">确认</view>
		</view>
		<u-popup mode="bottom" v-model="show" :closeable="true" border-radius="26">
			<scroll-view scroll-y="true" style="height: 900rpx;padding: 40rpx 0;box-sizing: border-box;" class="">
				<view class="list">
					<u-empty v-if="!selectList.length" mode="list" style="margin-top: 200rpx;"></u-empty>
					<view class="formBox item" v-for="(item,index) in selectList" :key="index">
						<view class="title f-c-sb">
							<view class="f-c-fs">
								<view>姓名：{{item.customerName}}</view>
								<view :class="item.operatorType==1?'type':'type1'">{{item.operatorTypeStr}}</view>
							</view>
							<u-checkbox :size="50" @change="checkboxChange(index, item.checkbox, item.customerNo)" v-model="item.checkbox"></u-checkbox>
						</view>
						<view class="f-c-fs">
							<view class="label">电话:</view>
							<view class="value">{{item.phone}}</view>
						</view>
						<view class="f-c-fs">
							<view class="label">客户来源:</view>
							<view class="value">{{item.registrationWay}}</view>
						</view>
						<view class="f-c-fs">
							<view class="label">创建时间:</view>
							<view class="value">{{item.timeCreate}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import {findCustomer} from '@/api/index.js'
import {couponSendAssignment} from '@/api/marketing.js'
import {mapGetters} from 'vuex'

export default {
  data() {
    return {
      listQuery: {
        pageNo: 1,
        pageSize: 20,
        param: '',
        noData: true
      },
      show: false,
      staffList: [],
				selectList:[],
				id:'',
				type:''//1:优惠券
			};
		},
		computed:{
			...mapGetters(["userInfo"]),
		},
		onLoad(option) {
			this.id=JSON.parse(option.param).id
			this.type=JSON.parse(option.param).type
			this.init()
		},
		onReachBottom() {
			if (this.listQuery.noData) {
				this.init();
			}
		},
		methods:{
			init(){
				this.getlist()
			},
			search(value) {
				this.listQuery.noData = true;
				this.listQuery.pageNo = 1;
				this.getlist();
			},
			checkboxChange(index, status, customerNo) {
				console.log(index, status, customerNo);
				if (!status) {
					this.selectList.push(this.staffList[index]);
				} else {
					this.selectList.forEach((val, index) => {
						if (val.customerNo == customerNo) {
							this.selectList.splice(index, 1);
						}
					});
				}
			},
			checkboxChange1(index, status, customerNo) {
				this.selectList.splice(index, 1);
				this.checkList();
			},
			checkList() {
				this.staffList.forEach((val, index) => {
					this.selectList.forEach((val1, index1) => {
						if (val.customerNo == val1.customerNo) {
							this.staffList[index].checkbox = true;
						}
					});
				});
			},
			getlist(){
					this.listQuery.storeId=this.userInfo.storeBasicId
				findCustomer(this.listQuery).then(res=>{
					console.log(res)
					if(this.listQuery.pageNo==1){
						this.staffList = res.data;
					}else{
						this.staffList = this.staffList.concat(res.data);
					}
					this.staffList.forEach((val, index) => {
						val.checkbox = false;
					});
					this.checkList();
					this.listQuery.pageNo+=1
					if(this.listQuery.pageSize!=res.data.length){
						this.listQuery.noData=false
					}
				})
			},
			sendAssignment(){
        var data = {
          id: this.id

        }
        var str = '';
        if (this.selectList.length != 0) {
          this.selectList.forEach((val, index) => {
            if (index == this.selectList.length - 1) {
              str = str + val.customerNo;
            } else {
              str = str + val.customerNo + ',';
            }
          });
          data.couponUserId = str;
        } else {
          this.$refs.uToast.show({
            title: '请选择要发放的客户',
            type: 'error'
          });
          return;
        }
				couponSendAssignment(data).then(res=>{
					if (res.code == 1) {
						this.$refs.uToast.show({
              title: '优惠券发送成功',
              type: 'success',
              back: true
            });
						uni.$emit('refreshData');
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						});
					}
				})
			},
			affirm(){
				if(this.type==1){
					this.sendAssignment()
				}
			}
		}
	}
</script>

<style lang="less">
	.content{
		padding-bottom: 200rpx;
		box-sizing: border-box;
	}
.search-wrapper{
	padding: 20rpx;
	box-sizing: border-box;
	
}
.list{
	.item{
		.type{
			height: 36rpx;
			background: #ff6738;
			border-radius: 6rpx;
			text-align: center;
			line-height: 36rpx;
			font-size: 24rpx;
			font-weight: 700;
			color: #ffffff;
			margin-left: 15rpx;
			padding: 0 10rpx;
		}
		.type1{
			height: 36rpx;
			background: #2db2ad;
			border-radius: 6rpx;
			text-align: center;
			line-height: 36rpx;
			font-size: 24rpx;
			font-weight: 700;
			color: #ffffff;
			margin-left: 15rpx;
			padding: 0 10rpx;
		}
		.label{
			margin: 15rpx 0;
		}
	}
}
.btn-wrapper{
	width: 750rpx;
	height: 137rpx;
	background: #ffffff;
	font-size: 32rpx;
	font-weight: 700;
	color: #177fff;
	position: fixed;
	bottom: 0;
	left: 0;
	.btn{
		width: 410rpx;
		height: 100rpx;
		background: #177fff;
		border-radius: 50rpx;
		text-align: center;
		line-height: 100rpx;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		color: #ffffff;
		line-height: 100rpx;
	}
}
</style>
